<template>
  <div>
    <div class="overflowH">
      <el-button class="fr" @click="openTreeModel">选择</el-button>
      <div style="margin-right: 75px">
        <my-input
          :ref="inputTreeRef"
          v-bind="$attrs"
          :model="showLabelModel"
          :config="config"
          :modelKey="modelKey"
          :fromSource="fromSource"
          :which="which"
          :formConfigData="formConfigData"
        >
        </my-input>
      </div>
    </div>
    <!--调用弹框-->
    <vxe-dialog
      ref="vxeDialog"
      :title="configDefault.dialogLabel"
      :isShowWin.sync="treeDialog"
      width="400px"
      height="600px"
    >
      <vue-tree
        ref="dialogTreeRef"
        slot="dialogContent"
        v-bind="$attrs"
        :which="which"
        :isShow="configDefault.isShow"
        :customData="configDefault.options"
        :showCheckbox="configDefault.multiple"
        :nodeKey="configDefault.props.id"
        :defaultcheckedKeys="selectModel"
        @callbackNodeClick="clickCTreeNode"
        @callbackCheck="checkTreeNode"
      ></vue-tree>
    </vxe-dialog>
  </div>
</template>

<script>
import vxeDialog from "@/components/vxeDialog/vxeDialog.vue";
import myInput from "@/components/vueForm/myInput.vue";
import vueTree from "@/components/vueTree/vueTree.vue";
import XEUtils from "xe-utils";
export default {
  components: {
    vxeDialog,
    myInput,
    vueTree,
  },
  props: {
    //自定义ref
    inputTreeRef: {
      type: [Number, String],
      default() {
        return "vueTreeModelRef";
      },
    },
    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组弹框树
      type: [String, Number],
      default() {
        return 1;
      },
    },
    // disabled: {
    //   // 当前组件是否禁用
    //   type: Boolean,
    //   default() {
    //     return false;
    //   },
    // },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
    showName: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      childModel: null,
      showLabelModel: this.showName,
      selectModel: [],
      treeDialog: false,
      configDefault: {
        isCustomData: true,
        clearable: true,
        props: {
          label: "label",
          id: "id",
        },
        options: [],
        isShow: true,
        multiple: false,
        placeholderLabel: "",
        dialogLabel: "请选择",
      },
    };
  },
  created() {
    //多选时可能存在多个键值
    if (this.configDefault.multiple) {
      this.childModel = this.model && this.model.length > 0 ? this.model : [];
    } else {
      this.childModel = this.model || this.model == 0 ? this.model : "";
    }
  },
  mounted() {},
  updated() {},
  watch: {
    childModel(val, oldVal) {
      if (
        (this.configDefault.multiple && !XEUtils.isEqual(val, oldVal)) ||
        (!this.configDefault.multiple && val !== oldVal)
      ) {
        this.selectModel =
          this.configDefault.multiple && val && val.length > 0
            ? val
            : !this.configDefault.multiple && val
            ? [val]
            : [];
        this.$emit("update:model", val);
      }
    },
    model(val, oldVal) {
      if (
        ((this.configDefault.multiple && !XEUtils.isEqual(val, this.childModel)) ||
          (!this.configDefault.multiple && val !== this.childModel)) &&
        val
      ) {
        this.childModel = val;
      }
    },
    showName(val, oldVal) {
      if (val !== this.showLabelModel) {
        this.showLabelModel = val;
      }
    },
    showLabelModel(val, oldVal) {
      if (val !== oldVal) {
        this.$emit("update:showName", val);
      }
    },
    formConfigData: {
      handler(newVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    openTreeModel() {
      this.treeDialog = true;
    },
    clickCTreeNode(data, Node, tree) {
      let currentObj = data;
      if (!this.configDefault.multiple) {
        this.showLabelModel = data[this.configDefault.props.label];
        this.childModel = data[this.configDefault.props.id];
      }
      this.$emit(
        "changeCallback",
        this.modelKey + "_" + this.which,
        this.childModel,
        currentObj
      );
    },
    checkTreeNode(data, checkedNodeObj) {
      let currentObj = checkedNodeObj.checkedNodes;
      if (this.configDefault.multiple) {
        this.showLabelModel = "";
        this.childModel = checkedNodeObj.checkedKeys;
        currentObj.forEach((item) => {
          this.showLabelModel += item[this.configDefault.props.label] + ",";
        });
        this.showLabelModel = this.showLabelModel
          ? this.showLabelModel.substring(0, this.showLabelModel.length - 1)
          : "";
      }
      this.$emit(
        "changeCallback",
        this.modelKey + "_" + this.which,
        this.childModel,
        currentObj
      );
    },
  },
};
</script>
